<template>


	<view class="container">
		<view class="user-info-wrapper">
			<!-- 用户信息卡片 -->
			<view class="user-info-card">

				<!-- 头像 -->
				<u--image :src="userInfo.imgUrl||webconst.default_profile" width="70px" height="70px" shape="circle"
					:showLoading="true" @click="goToInternalPage(`userinfo/index`)"></u--image>

				<!-- 昵称 -->
				<u-text :text="userInfo.nickName||'未设置昵称'" size="18px" color="#333" bold margin="0 0 0 15px"
					@click="goToInternalPage(`userinfo/index`)"></u-text>
					
				<button class="share-btn" open-type="share">
					<u--image :src="webconst.default_sharding_img" width="25px" height="25px"
						open-type="share"></u--image>
				</button>
			</view>
		</view>
		<view class="room-list-container" v-if="currentHouseInfo!=null">
			<view class="list-box" @click="onHouseClick(currentHouseInfo.houseNumber,currentHouseInfo.houseCode)">
				<view class="list-box-top flex-box">
					<view class="list-box-top-left  flex-box">
						<view class="group">
							<up-avatar-group :urls="currentHouseInfo.userImgs" size="35" gap="0.4"></up-avatar-group>
						</view>
						<view>
							<view>
								<text>房:</text>
								<text>{{currentHouseInfo.houseNumber}}</text>
							</view>
							<view class="list-box-top-left-time-item">
								<text></text>
								<text>{{currentHouseInfo.createTime}}</text>
							</view>
						</view>
					</view>
					<text class="list-box-top-right-status-item" style="{color:'#5ac725'}">进行中</text>
				</view>
			</view>
		</view>
		<u-cell-group>
			<u-cell title="创建房间" icon="plus" @click="editUserModelShow"></u-cell>
			<u-cell title="房间历史" icon="list" @click="gotoHouseRecord"></u-cell>
			<!-- <u-cell title="关于我们" icon="info" @click="goToAbout"></u-cell> -->
			<u-cell title="退出登录" icon="info" @click="loginOut"></u-cell>
		</u-cell-group>

	</view>

	<editUserInfoModel ref="editUserModel" title="创建房间" @confirm="onEditUserConfirm" />
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		loginRequest,
		debugLoginRequest
	} from '@/request/login.js'

	import {
		getUserInfoRequest
	} from '@/request/user.js'
	import {
		onLoad,
		onShow,
		onShareAppMessage
	} from '@dcloudio/uni-app'


	import {
		createHouseRequest,
		getCurrentHouseInfoRequest
	} from '/request/house.js';

	import {
		goToInternalPage
	} from '@/utils/jump.js'

	import {
		wxJsCodeLogin
	} from '@/utils/buzlogin.js'

	import {
		isWeChatMiniProgram
	} from '@/utils/platform.js'

	import {
		webconst
	} from '@/utils/webconst.js'

	import editUserInfoModel from '@/components/u-edit-userinfo-model/index.vue'
	const userInfo = ref({
		nickName: '微信用户',
		imgUrl: webconst.default_profile
	})


	//调试登录
	const debugLogin = () => {

		uni.setStorageSync('token', '');
		var token = uni.getStorageSync('token');
		if (token != "") {
			getUserInfo();
			return;
		}

		debugLoginRequest({
			"code": "test"
		}).then((res) => {
			if (res.code == 0) {
				uni.setStorageSync('token', res.data);
				getUserInfo();
			}
			console.log('成功', res.message);
		}).catch((err) => {
			console.error('失败', err);
		});
	}




	//获取用户信息
	const getUserInfo = () => {
		getUserInfoRequest().then((res) => {
			if (res.code == 0) {
				//理论上要存储到本地内存中这里暂时不处理以后需要再处理
				userInfo.value = {
					nickName: res.data.nickName,
					imgUrl: res.data.imgUrl == "" ? webconst.default_profile : res.data.imgUrl
				}

			}
			console.log('成功', res);
		}).catch((err) => {
			console.error('失败', err);
		});

	}


	onMounted(() => {
		userInfo.value = {
			nickName: '微信用户',
			imgUrl: webconst.default_profile
		}
	})

	// 页面生命周期（uni-app）
	onLoad(() => {

		console.log('个人中心页面加载')
		//进入页面默认调用登录



	})


	//创建房间
	const createHouse = () => {
		createHouseRequest().then((res) => {
			if (res.code == 0) {
				//需要做跳转对应的房间页面
				//展示对应的二维码
				gotoHouse(res.data.houseCode);
			} else {
				console.log(res.message)
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}
			console.log('成功', res);
		}).catch((err) => {
			console.error('失败', err);
		});
	}


	//跳转到房间页面
	const gotoHouse = (code) => {
		goToInternalPage("house/index?code=" + code)
	}

	const gotoHouseRecord = () => {
		goToInternalPage("houserecord/index")
	}

	//退出登录
	const loginOut = () => {
		uni.setStorageSync('token', '');
		goToInternalPage("login/index")
	}



	//在线房间相关信息展示

	const currentHouseInfo = ref(null)

	const getCurrentHouseInfo = () => {
		getCurrentHouseInfoRequest().then((res) => {
			if (res.code == 0) {

				const userImgs = res.data.userInfos?.map(detail => detail.imgUrl) || [];
				res.data.userImgs = userImgs;
				currentHouseInfo.value = res.data;

			}
			console.log('成功', res);
		}).catch((err) => {
			console.error('失败', err);
		});
	}

	// 处理点击房间
	const onHouseClick = (houseNumber, houseCode) => {

		uni.showToast({
			title: `进入房间 ${houseNumber}`,
			icon: 'none'
		})
		// 跳转房间详情
		goToInternalPage(`house/index?code=${houseCode}`);
	}


	const editUserModel = ref(null)

	const editUserModelShow = async () => {
		try {
			await editUserModel.value.open({
				nickName: userInfo.value.nickName,
				imgUrl: userInfo.value.imgUrl
			})
			console.log('用户点击了确定')
		} catch (err) {
			console.log(err)
			console.log('用户点击了取消')
		}
	}

	//确认后可以要重新加载一下房间信息
	const onEditUserConfirm = (data) => {
		createHouse({
			isEdit: true,
			nickName: data.nickName,
			imgUrl: data.imgUrl
		});
	}

	onShow(() => {	
		wxJsCodeLogin()
			.then((loginType) => {
				getUserInfo();
				getCurrentHouseInfo();
		});
		uni.showShareMenu({
			withShareTicket: true,
			// 显示分享到聊天、朋友圈
			showShareItems: ['shareAppMessage']
		})
	})



	onShareAppMessage(() => {
		console.log('分享被调用了') // 看微信开发者工具控制台
		console.log(webconst.share_house_info.title)
		//houseId.value

		return {
			path: webconst.share_center_info.path,
			title: webconst.share_center_info.title,
			imageUrl: webconst.share_center_info.imageUrl
		}
	})
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.user-info-wrapper {
		padding: 20px 15px;
		background-color: #f8f8f8;
	}

	.user-info-card {
		display: flex;
		align-items: center;
		background-color: #fff;
		/* 白色背景 */
		padding: 18px 20px;
		border-radius: 12px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
		/* 可选：添加边框 */
		border: 1px solid #eee;
	}

	.flex-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex-end {
		justify-content: flex-end;
	}


	.list-box {
		width: 100%;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #e5e5e5;

		.list-box-top {
			width: 100%;
			margin-bottom: 30rpx;
			align-items: flex-start;

			.list-box-top-left {
				width: 80%;
				justify-content: flex-start;
				gap: 20rpx;
				color: #333;

				.group {
					// width: 300rpx;
				}

				.list-box-top-left-time-item {
					font-size: 12px;
					margin-top: 2px;
					color: #999;
				}
			}

			.list-box-top-right-status-item {
				color: #5ac725;

			}
		}

		.list-box-btn {
			width: 100%;
			justify-content: flex-end;

		}
	}
	
	.share-btn {
	  background: transparent;
	  padding: 0;
	  margin: 0;
	  border: none;
	  line-height: initial;
	}
	
	/* 隐藏 button 默认样式 */
	.share-btn::after {
	  border: none;
	  display: none;
	}
</style>